<template>
  <div>
    <div class="title">
      消耗品
    </div>
    <div class="consumables-store">
      <GoodItem
        v-for="item in consumablesStoreList"
        :key="item.id"
        :item="item"
        showPrice
      ></GoodItem>
    </div>
    <div class="title">
      随机商店
      <i class="ewg-icon-icon_shuaxin refresh-btn" title="刷新物品"></i>
    </div>
    <div class="equip-store"></div>
  </div>
</template>
<script lang="ts">
import consumablesPools from "@/const/consumables/pools";
import { Consumables } from "@/const/consumables/type";
import GoodItem from "./GoodItem.vue";
export default {
  components: { GoodItem },
  setup() {
    const consumablesStoreList: Consumables[] = [
      consumablesPools.get("小红药"),
      consumablesPools.get("中红药"),
      consumablesPools.get("雷雷的援助")
    ];
    return { consumablesStoreList };
  }
};
</script>
<style lang="scss" scoped>
.title {
  margin-bottom: 10px;
}
.refresh-btn {
  cursor: pointer;
  &:hover {
    font-size: 16px;
  }
}
.consumables-store {
  display: grid;
  grid-template-columns: repeat(3, 40px);
  gap: 15px;
}
</style>
